/**
 * Created by Administrator on 2017/7/21 0021.
 */
define(function(){
    var obj = {};
    obj.add = function(help,show1,show2){
        obj.help = document.querySelector(help);
        obj.show1 = document.querySelector(show1);
        obj.show2 = document.querySelectorAll(show2);
        obj.i = obj.help.querySelector("i");
        obj.div = obj.help.querySelector("div");
        obj.help.onmouseover = function(){
            obj.help.style.overflow = "visible";
            obj.div.style.borderColor = "#C7C7C7";
            obj.i.className = "topTriangle"
        };
        obj.div.onmouseleave = function(){
            obj.help.style.overflow = "hidden";
            obj.i.className = "bottomTriangle";
            obj.div.style.borderColor = "#F6F6F6";
        };
        obj.ajax();
    };
    obj.ajax = function(){
        var xhr = new XMLHttpRequest();
        xhr.open("get","http://localhost:8888/show",true);
        xhr.send();
        xhr.onreadystatechange = function(){
            if(xhr.readyState == 4){
                if(xhr.status>=200 && xhr.status<=300 || xhr.status == 304){
                    obj.createHandler(JSON.parse(xhr.responseText))
                }
            }
        }
    };
    obj.createHandler = function(o){
        for(var i = 0;i< o.img0.length;i++){
            var img = new Image();
            img.src = o.img0[i];
            obj.show1.appendChild(img);
        }
        for(var j = 0;j< o.img1.imgUrl.length;j++){
            var div1 = document.createElement("div");
            var img1 = new Image();
            img1.src = o.img1.imgUrl[j];
            var p1 = document.createElement("p");
            p1.textContent = o.img1.name[j];
            div1.appendChild(img1);
            div1.appendChild(p1);
            obj.show2[0].appendChild(div1);
        }
        for(var k = 0;k< o.img2.imgUrl.length;k++){
            var div2 = document.createElement("div");
            var img2 = new Image();
            img2.src = o.img2.imgUrl[k];
            div2.appendChild(img2);
            var p2 = document.createElement("p");
            p2.textContent = o.img2.name[k];
            div2.appendChild(p2);
            var p3 = document.createElement("p");
            p3.textContent = "￥"+o.img2.price[k];
            p3.style.color = "red";
            div2.appendChild(p3);
            obj.show2[1].appendChild(div2);
            img2.style.width = "180px";
        }
    };
    return obj;
});